<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入day.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>


    <h1>使用场景：需要给要显示出来的值做一下处理</h1>

    <div id="root">

        <h2>显示格式化后的时间</h2>
        <!-- 计算属性 -->
        1、时间戳：{{fmtTime}}
        <br>

        <!-- 方法实现 -->
        2、时间戳：{{getFmtTime()}}
        <br>

        <!-- 过滤器实现，写法：值 | 执行前面那个值的方法，该方法写到过滤器中，| 是过滤符号，类似于linux里面的管道 -->
        3、时间戳：{{time | timeFmt}}
        <br>

        <!-- 另一种写法：入参'YYYY/MM/DD'是第二参数，第一参数是time -->
        4、时间戳：{{time | timeFmt2('YYYY/MM/DD')}}
        <br>

        <!-- 过滤器可以使用多个 -->
        5、时间戳：{{time | timeFmt2('YYYY/MM/DD') | mySlice}}
        <br>

    </div>

    <div id="root2">
        <!-- 全局过滤器 -->
        <h2>全局过滤器：{{test | mySlice2}}</h2>
    </div>

    <!-- 过滤器只是用于简单过滤数据，复杂的数据操作不建议使用 -->

</body>
<script type="text/javascript">

    // 全局过滤器，需要写在 new Vue实例前面
    Vue.filter('mySlice2', function (val) {
        return val.slice(0, 4)
    })

    const vm = new Vue({
        el: "#root",
        data: {
            time: 1689767325
        },
        methods: {
            getFmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        computed: {
            fmtTime() {
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        // 局部过滤器
        filters: {
            // 参数value就是标签中的time
            timeFmt(value) {
                return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
            },

            // str参数是'YYYY/MM/DD'，value是time参数
            // str = 'YYYY年MM月DD HH:mm:ss' 表示，如果没有str参数没有传值，就用'YYYY年MM月DD HH:mm:ss'，如果传值了，就用str传的值的格式
            timeFmt2(value, str = 'YYYY年MM月DD HH:mm:ss') {
                return dayjs(value).format(str)
            },

            mySlice(value) {
                // 截取前4位
                return value.slice(0, 4)
            }
        }
    })

    new Vue({
        el: '#root2',
        data: {
            test: 'hello world',
        }
    })
</script>

</html>